
import styles from '../css分支/Shop.module.css'
import { Arrow, ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Tabs, Search } from 'react-vant'
import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react'
import { SideBar } from 'antd-mobile'
import { useThrottleFn } from 'ahooks'
import { Card, Price, Tag } from '@nutui/nutui-react'
import { Checkbox, Cell } from '@nutui/nutui-react'
export default function Shop() {
    const navigate = useNavigate()
    const items = ['在售中', '已下架']
    const [value, setValue] = useState('');
    const [list, setlist] = useState([])
    const [type, settype] = useState([])
    const getType = async () => {
        let res = await axios.get('http://localhost:3000/xzx/type')
        settype(res.data.data)
    }
    const getList = async () => {
        let res = await axios.get('http://localhost:3000/xzx/shop')
        setlist(res.data.data)
    }
    useEffect(() => {
        getList(),
            getType()
    }, [])
    const [activeKey, setActiveKey] = useState('67b4647d7c5e12eec6c0f13f')

    const { run: handleScroll } = useThrottleFn(
        () => {
            let currentKey = type[0]._id
            for (const item of type) {
                const element = document.getElementById(`anchor-${item._id}`)
                if (!element) continue
                const rect = element.getBoundingClientRect()
                if (rect.top <= 0) {
                    currentKey = item._id
                } else {
                    break
                }
            }
            setActiveKey(currentKey)
        },
        {
            leading: true,
            trailing: true,
            wait: 100,
        }
    )

    const mainElementRef = useRef(null)

    useEffect(() => {
        const mainElement = mainElementRef.current
        if (!mainElement) return
        mainElement.addEventListener('scroll', handleScroll)
        return () => {
            mainElement.removeEventListener('scroll', handleScroll)
        }
    }, [])

    // const [controlled, setControlled] = useState(false)

    //判断是下架还是上架页面
    const [pan, setpan] = useState('0')
    const handDian = (e) => {
        setpan(e.name)
    }
    const setControlled = async (val, item) => {
        console.log(val);
        let res = await axios.post('http://localhost:3000/xzx/update', { item, val })
        if (res.data.code == 200) {
            getList()
        }
    }
    const handShang = async () => {
        let res = await axios.post('http://localhost:3000/xzx/shang')
        if (res.data.code == 200) {
            getList()
        }
    }
    return (
        <div>
            <div className={styles.head}>
                <ArrowLeft style={{ marginLeft: '0.1rem' }} onClick={() => { navigate('/shou/main') }} />
                <p style={{ fontSize: '0.22rem' }}>商品管理</p>
                <p style={{ marginRight: '0.1rem' }}>商品分类</p>
            </div>
            <div className={styles.center}>
                <Tabs defaultActive={2} onClickTab={(e) => handDian(e)}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={`${item}`}>
                            <br />
                            <Search
                                showAction
                                actionText={<div onClick={() => Toast.info(value)}>搜索</div>}
                                value={value}
                                shape='round'
                                onChange={setValue}
                                placeholder="请输入搜索关键词"
                            />
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
            {pan == 0 ? <div className={styles.container}>
                <div className={styles.side}>
                    <SideBar
                        activeKey={activeKey}
                        onChange={key => {
                            document.getElementById(`anchor-${key}`)?.scrollIntoView()
                        }}
                    >
                        {type.map(item => (
                            <SideBar.Item key={item._id} title={item.name} />
                        ))}
                    </SideBar>
                </div>
                <div className={styles.main} ref={mainElementRef}>
                    {type.map(items => (
                        <div key={items._id} >
                            <h2 id={`anchor-${items._id}`}>{items.name}</h2>
                            {
                                list.map((item, index) => {
                                    return (
                                        (items._id == item.tid && item.issale == true) && <Card
                                            onClick={() => navigate('/shop_detail', { state: { item: item } })}
                                            style={{ margin: '0.3rem 0rem' }}
                                            src={item.img}
                                            title={item.name}
                                            price={item.price}
                                            description={
                                                <>
                                                    <p>库存{item.count}</p>
                                                    <p style={{ fontSize: '0.15rem' }}>月售6</p>
                                                </>
                                            }
                                        />
                                    )
                                })
                            }
                        </div>
                    ))}
                </div>
                <div className={styles.foot}>
                    <p>商品排序</p>
                    <p onClick={() => { navigate('/xiajia') }}>批量下架</p>
                    <p>发布商品</p>
                </div>
            </div>
                : <div className={styles.xiajia}>
                    {/* <div style={{ float: 'right', marginRight: '0.15rem' }}>
                    <Checkbox
                        className="test"
                        // checked={controlled}
                        // onChange={(val) => setControlled(val)}
                    ><p style={{ fontSize: '0.18rem' }}>全选</p></Checkbox>
                </div> */}


                    {
                        list.map((item, index) => {
                            return (
                                item.issale == false && <Card
                                    style={{ margin: '0.3rem 0rem' }}
                                    src={item.img}
                                    title={item.name}
                                    price={item.price}
                                    description={
                                        <>
                                            <div style={{ position: 'relative' }}>
                                                <p>库存{item.count}</p>
                                                <p style={{ fontSize: '0.15rem' }}>月售6</p>
                                                <Checkbox className="test" label="" checked={!item.issale}
                                                    onChange={(val) => setControlled(val, item)} style={{ position: 'absolute', right: '0.38rem', bottom: '0.1rem' }} />
                                            </div>
                                        </>
                                    }
                                />
                            )
                        })
                    }
                    <div className={styles.foot}>

                        <p onClick={() => handShang()}>批量上架</p>

                    </div>
                </div>}
        </div>
    )
}
